<template>
    <div class="dashboard-editor-container">
        <el-row :gutter="32" v-loading="loading">
            <el-col :span="24" class="card-box">
                <el-card>
                    <div slot="header"><span>首页信息配置</span></div>
                    <el-form
                        ref="form"
                        :model="form"
                        :rules="rules"
                        label-width="120px"
                    >
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="单位简介" prop="outDate">
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入多行文本"
                                        v-model="form.des"
                                        :autosize="{ minRows: 6, maxRows: 6 }"
                                        :style="{ width: '100%' }"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item
                                    label="首页轮播图"
                                    class="my-upload"
                                >
                                    <el-upload
                                        v-model="form.photo1"
                                        :headers="this.headers"
                                        :action="this.uplPhotoAction"
                                        :file-list="fileList"
                                        :on-success="uplPhotoSuccess"
                                        list-type="picture-card"
                                        :on-remove="removeFile"
                                    >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <span>建议上传大小 650 * 300</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-form-item label="">
                                <el-button
                                    type="primary"
                                    style="width: 150px;"
                                    @click="submitForm"
                                    >保存</el-button
                                >
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { saveBanner, getBanner } from "../../../api/system/system";
export default {
    name: 'Index',
    components: {},
    created () {
        this.getDeptLogo();
    },
    data () {
        return {
            // 遮罩层
            loading: true,
            form: {
                banner: [],
                des: ""
            },
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            uplPhotoAction: process.env.VUE_APP_BASE_API + "/common/upload",  //图片上传地址
            field101fileList: [], //图片上传集合
            // 表单校验
            rules: {

            },
            fileList: []
        }
    },
    methods: {
      removeFile (file, fileList) {
        this.form.banner = [];
        fileList.forEach(item => {
          let url = item.response ? item.response.url : item.url;
          this.form.banner.push(url) ;
        });
      },
        uplPhotoSuccess (res, file, fileList) {
          this.form.banner = [];
            fileList.forEach(item => {
              let url = item.response ? item.response.url : item.url;
              this.form.banner.push(url);
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.loading = true;
            saveBanner(this.form).then(response => {
                if (response.code === 200) {
                    this.msgSuccess("修改成功");
                }
                this.loading = false;
            });
        },
        /** 提交按钮 */
        getDeptLogo: function () {
            this.loading = true;
            getBanner().then(response => {
                if (response.code === 200) {
                    let certImgArr = response.data.photos;
                    this.form.des = response.data.des;
                    this.form.banner = [];
                    this.fileList=[];
                    certImgArr.forEach(item => {
                        this.fileList.push({
                            url: item.attaPath
                        });
                      this.form.banner.push(item.attaPath);
                    })
                }
            });
            this.loading = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
.my-upload >>> .el-upload-list__item-thumbnail {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
</style>
